<template>
  <view>
    <Header :name='name'> </Header>
    <!-- 认养新品 -->
    <view class="shidu-list">
      <view class="shidu-item"
            @click="lookDetail"
            v-for="(item, index) in adoptionListData">
        <image :src="item.path"
               mode=""></image>
        <view class="content">
          <view class="value">
            <text class="name">{{ item.goodsName }}</text>
          </view>
          <view class="goodsInfo">
            <view class="goods">
              <text class="breed">品种</text>
              <text class="breedName">{{ item.breed }}</text>
            </view>
            <view class="goods">
              <text class="breed">年龄</text>
              <text class="breedName">{{ item.age }}</text>
            </view>
            <view class="goods">
              <text class="breed">健康状态</text>
              <text class="breedName">{{ item.status }}</text>
            </view>
          </view>
          <view class="ad">
            <text class="address">{{ item.address }}</text>
          </view>
        </view>
      </view>
    </view>
    <Tabar :value='value'></Tabar>
  </view>
</template>

<script>
import Tabar from '@/pages/componment/tabar.vue'
import Header from '@/pages/componment/Header.vue'

export default {
  components: {
    Tabar,
    Header
  },
  data () {
    return {
      value: 2,
      name: '农场列表',
      adoptionListData: [{
        path: '../../static/images/index/chicken.jpg',
        goodsName: "密云本地溜达鸡",
        breed: '北京油鸡',
        age: '3个月',
        status: '优秀',
        address: '北京市顺义市好再来农场'
      }, {
        path: '../../static/images/index/tomato.jpg',
        goodsName: "顺义精品大棚番茄",
        breed: '传奇,樱桃...',
        age: '30天',
        status: '精品',
        address: '北京市顺义市绿色心情农场'
      }],
    };
  },
  onLoad () { },
  methods: {
    lookDetail () {
      uni.redirectTo({
        url: 'pages/farm/goodsDetail'
      });
    }
  }
}
</script>

<style lang="less">
.shidu-list {
  .shidu-item :hover {
    background-color: #f6f8f6;
  }

  .shidu-item {
    display: flex;
    padding: 20rpx 10px;
    background-color: white;
    margin-bottom: 10px;
    border-radius: 10rpx;

    image {
      width: 140px;
      height: 109px;
      border-radius: 10rpx;
    }

    .content {
      width: 100%;
      padding: 0 10px;

      .goodsInfo {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;

        .goods {
          .breed {
            text-align: center;
            color: #a1a1a0;
            font-size: 14px;
            display: block;
          }

          .breedName {
            font-size: 14px;
          }
        }
      }

      .ad {
        margin-top: 10px;

        .address {
          font-size: 12px;
          color: #a1a1a0;
        }
      }

      .timeSchedule {
        .time {
          color: #a1a1a0;
          font-size: 14px;
        }
      }

      .value {
        display: flex;
        justify-content: flex-start;

        .name {
          font-size: 14px;
          font-weight: 600;
          margin-right: 5px;
        }

        .money {
          color: firebrick;
          font-size: 24px;
          margin-left: 5px;
          font-weight: 800;
        }

        .unit {
          font-size: 12px;
          line-height: 12px;
          padding-top: 6px;
        }
      }
    }
  }
}
</style>
